<template>
  <div>
    <!--  <h1>博客管理</h1>-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label="链接id"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fid }}</span>
        </template>
      </el-table-column>


      <el-table-column
          label="链接名"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-position"></i>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="链接描述"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-more-outline"></i>
          <span style="margin-left: 10px">{{ scope.row.description }}</span>
        </template>
      </el-table-column>


      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" size="mini" @click="dialogFormVisible = true">增加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.row.fid)">修改
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.fid)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增url" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="链接url" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片url" :label-width="formLabelWidth">
          <el-input v-model="form.img" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUrl">确 定</el-button>
      </div>
    </el-dialog>

    <!--分页组件-->
    <!--关键属性：
      current-page
      page-size
      total
      点击分页的事件：@current-change
      -->
    <el-pagination class="mpage"
                   background
                   layout="prev, pager, next"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   :total="total"
                   @current-change=page>
    </el-pagination>


  </div>
</template>

<script>
export default {
  name: "urlManage",

  data() {
    return {
      tableData: [],

      input: '', //表单

      //分页参数
      currentPage: 1,
      currentPage_s: 1,
      total: 0,
      pageSize: 10,


      dialogFormVisible: false,
      form: {
        fid:'',  //用户不可输入  由回显得到
        name: '',
        description: '',
        img: '',
        url: '',
      },
      formLabelWidth: '120px'


    }
  },
  methods: {
    addUrl() {
      this.dialogFormVisible = false

      this.$axios.post('addUrl', this.form, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        this.$message.success('ヾ(•ω•`)o')
        this.page(this.currentPage)
      })
    },

    handleEdit(fid) {
      this.dialogFormVisible = true
      //回显文章内容
      this.$axios.get('/getUrlById/' + fid).then(res => {
        this.form = res.data.data
      })
      //然后和增加url共用 接口
    },
    handleDelete(fid) {
      this.$axios.post('/deleteUrl/' + fid, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        console.log('删除成功')
        //删除成功
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        //刷新
        this.page(this.currentPage)
      })

    },

    page(currentPage) {
      const _this = this
      _this.$axios.get("/showUrl?currentPage=" + currentPage).then(res => {
        console.log(res)
        //这里json数据 不是直接的res.data.data 因为还包括了分页数等等
        _this.tableData = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size

      })
    },


  },

  created() {

    //钩子函数 初始化就赋值为1
    this.page(1)

  }

}
</script>

<style scoped>

</style>